<template>
  <div class="file-uploader">
    <!-- 上传区域 -->
    <div class="upload-area">
      <el-upload
        ref="uploadRef"
        class="upload-dragger"
        drag
        :auto-upload="false"
        :show-file-list="false"
        :on-change="handleFileChange"
        multiple
        accept="*"
      >
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            支持图片、PDF、Word、Excel、PPT、Markdown等格式
          </div>
        </template>
      </el-upload>
    </div>

    <!-- URL 输入区域 -->
    <div class="url-input-area">
      <el-divider>或</el-divider>
      <el-input
        v-model="fileUrl"
        placeholder="输入文档链接地址（支持图片、PDF等）"
        clearable
        @keyup.enter="handleUrlLoad"
      >
        <template #prepend>
          <el-icon><Link /></el-icon>
        </template>
        <template #append>
          <el-button 
            :icon="Position" 
            @click="handleUrlLoad"
            :loading="urlLoading"
          >
            加载
          </el-button>
        </template>
      </el-input>
      <div class="url-tip">
        <el-text size="small" type="info">
          提示：支持直接访问的文件链接，如图片、PDF等。需要链接支持跨域访问。
        </el-text>
      </div>
    </div>

    <!-- 文件列表 -->
    <div class="file-list">
      <div class="list-header">
        <span>已上传文件 ({{ fileList.length }})</span>
        <el-button 
          v-if="fileList.length > 0"
          type="danger" 
          size="small" 
          :icon="Delete"
          @click="clearAll"
          text
        >
          清空
        </el-button>
      </div>

      <el-scrollbar height="calc(100vh - 300px)">
        <el-empty 
          v-if="fileList.length === 0" 
          description="暂无文件，请上传"
          :image-size="100"
        />
        
        <div 
          v-for="file in fileList" 
          :key="file.uid"
          class="file-item"
          :class="{ active: currentFile?.uid === file.uid }"
          @click="selectFile(file)"
        >
          <div class="file-icon">
            <el-icon :size="24" :color="getFileIconColor(file.name)">
              <component :is="getFileIcon(file.name)" />
            </el-icon>
          </div>
          
          <div class="file-info">
            <div class="file-name" :title="file.name">{{ file.name }}</div>
            <div class="file-size">{{ formatFileSize(file.size) }}</div>
          </div>

          <el-button
            type="danger"
            :icon="Delete"
            size="small"
            circle
            text
            @click.stop="removeFile(file)"
          />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  UploadFilled, 
  Delete,
  Document,
  Picture,
  VideoCamera,
  Memo,
  DataAnalysis,
  Files,
  Link,
  Position
} from '@element-plus/icons-vue'
import { getFileType, FileType, isFileSupported } from '../utils/fileHelper'

const emit = defineEmits(['select-file'])

// 文件列表
const fileList = ref([])
// 当前选中的文件
const currentFile = ref(null)
// URL 输入
const fileUrl = ref('')
const urlLoading = ref(false)

// 处理文件变化
const handleFileChange = (file) => {
  // 检查文件是否已存在
  const exists = fileList.value.some(f => f.name === file.name && f.size === file.size)
  if (exists) {
    ElMessage.warning('文件已存在')
    return
  }

  // 检查文件是否支持
  if (!isFileSupported(file.name)) {
    ElMessage.error(`不支持的文件格式: ${file.name}`)
    return
  }

  // 添加文件到列表
  fileList.value.push(file)
  
  // 自动选中新上传的文件
  selectFile(file)
  
  ElMessage.success(`已添加: ${file.name}`)
}

// 选择文件
const selectFile = (file) => {
  currentFile.value = file
  emit('select-file', file)
}

// 移除文件
const removeFile = (file) => {
  const index = fileList.value.findIndex(f => f.uid === file.uid)
  if (index > -1) {
    fileList.value.splice(index, 1)
    
    // 如果删除的是当前选中的文件，清空选中状态
    if (currentFile.value?.uid === file.uid) {
      currentFile.value = null
      emit('select-file', null)
    }
    
    ElMessage.success('已删除文件')
  }
}

// 清空所有文件
const clearAll = () => {
  fileList.value = []
  currentFile.value = null
  emit('select-file', null)
  ElMessage.success('已清空所有文件')
}

// 通过 URL 加载文件
const handleUrlLoad = async () => {
  if (!fileUrl.value) {
    ElMessage.warning('请输入文档链接地址')
    return
  }

  // 检查 URL 格式
  try {
    new URL(fileUrl.value)
  } catch (e) {
    ElMessage.error('无效的链接地址')
    return
  }

  urlLoading.value = true

  try {
    // 从 URL 获取文件名
    const urlObj = new URL(fileUrl.value)
    let fileName = ''
    
    // 检测是否为代理 URL（如 proxy.php?url=...）
    if (urlObj.pathname.includes('proxy') && urlObj.searchParams.has('url')) {
      // 从代理参数中提取真实 URL
      const realUrl = urlObj.searchParams.get('url')
      try {
        const realUrlObj = new URL(realUrl)
        const realPathname = realUrlObj.pathname
        fileName = realPathname.split('/').pop() || 'document'
        console.log('✓ 检测到代理 URL，真实文件名:', fileName)
      } catch (e) {
        console.warn('解析代理 URL 失败，使用默认文件名')
        fileName = 'document'
      }
    } else {
      // 直接从 URL 路径提取文件名
      const pathname = urlObj.pathname
      fileName = pathname.split('/').pop() || 'document'
    }
    
    // 检查文件格式是否支持
    if (!isFileSupported(fileName)) {
      ElMessage.error(`不支持的文件格式: ${fileName}`)
      urlLoading.value = false
      return
    }

    // 创建虚拟文件对象
    const virtualFile = {
      uid: Date.now(),
      name: fileName,
      size: 0, // URL 文件大小未知
      url: fileUrl.value,
      isUrl: true, // 标记为 URL 文件
      raw: null
    }

    // 添加到文件列表
    fileList.value.push(virtualFile)
    
    // 自动选中
    selectFile(virtualFile)
    
    ElMessage.success(`已添加链接文件: ${fileName}`)
    fileUrl.value = ''
  } catch (error) {
    console.error('URL 加载失败:', error)
    ElMessage.error('链接加载失败，请检查地址是否正确')
  } finally {
    urlLoading.value = false
  }
}

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '未知大小'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
}

// 获取文件图标
const getFileIcon = (fileName) => {
  const fileType = getFileType(fileName)
  const iconMap = {
    [FileType.IMAGE]: Picture,
    [FileType.PDF]: Document,
    [FileType.DOCX]: Memo,
    [FileType.EXCEL]: DataAnalysis,
    [FileType.PPT]: Files,
    [FileType.MARKDOWN]: Memo,
    [FileType.TEXT]: Document,
  }
  return iconMap[fileType] || Document
}

// 获取文件图标颜色
const getFileIconColor = (fileName) => {
  const fileType = getFileType(fileName)
  const colorMap = {
    [FileType.IMAGE]: '#67C23A',
    [FileType.PDF]: '#F56C6C',
    [FileType.DOCX]: '#409EFF',
    [FileType.EXCEL]: '#67C23A',
    [FileType.PPT]: '#E6A23C',
    [FileType.MARKDOWN]: '#909399',
    [FileType.TEXT]: '#909399',
  }
  return colorMap[fileType] || '#909399'
}
</script>

<style scoped>
.file-uploader {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.upload-area {
  padding: 20px;
}

.upload-dragger {
  width: 100%;
}

:deep(.el-upload-dragger) {
  width: 100%;
  padding: 30px;
}

.file-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.list-header {
  padding: 12px 20px;
  background: #f5f7fa;
  border-top: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s;
}

.file-item:hover {
  background: #f5f7fa;
}

.file-item.active {
  background: #ecf5ff;
  border-left: 3px solid #409EFF;
}

.file-icon {
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 12px;
  color: #909399;
}

.el-upload__tip {
  text-align: center;
  color: #909399;
  font-size: 12px;
  margin-top: 8px;
}

.url-input-area {
  padding: 0 20px 20px;
}

.url-input-area :deep(.el-divider__text) {
  background-color: #fff;
  color: #909399;
  font-size: 12px;
}

.url-tip {
  margin-top: 8px;
  text-align: center;
}
</style>

